<template>
  <div class="page-wrapper">
    <div class="header" v-if="showHeader">
      <Header></Header>
    </div>
    <div class="content">
      <RouterView></RouterView>
    </div>
    <div class="footer" v-if="showFooter">
      <Footer></Footer>
    </div>
    <!-- 滚动到顶部 -->
    <ScrollTop/>
  </div>
</template>

<script setup lang="js">
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import ScrollTop from "@/components/ScrollTop.vue";
import {computed} from "vue";
import {useRoute} from "vue-router";
import {notification} from "ant-design-vue";

const route = useRoute();

const showFooter = computed(() => {
  console.log(route.name);

  return route.name !== 'login'
      && route.name !== 'photoWall'
      && route.name !== 'articleEdit'
      ;
})

const showHeader = computed(() => {
  console.log(route.name);
  return route.name !== 'articleEdit'
      ;
})

const openNotification = () => {
  notification.open({
    message: 'zhiheng.lu',
    description:
        '欢迎来到我的小站！这里有我的点滴分享，愿你能寻到共鸣。感谢停留，盼你自在温暖。',
    duration: 0,
  });
};

openNotification();
</script>

<style scoped lang="less">
// 根容器：撑满视口高度，垂直分布子元素
.page-wrapper {
  display: flex;
  flex-direction: column; // 垂直排列子元素（header、content、footer）
  min-height: 100vh; // 最小高度为视口高度（确保内容不足时也撑满屏幕）
}

// 内容区：自动填充剩余空间（关键）
.content {
  flex: 1; // 占据除 header 和 footer 外的所有剩余空间
}

.footer {
  z-index: 100;
}
</style>